<template>
  <div>
    <el-dialog
      title="物流进度"
      :visible.sync="isVisible"
      width="40%"
      @close="beforeClose"
      @open="open"
    >
    <el-timeline>
        <el-timeline-item
        v-for="(activity, index) in progresslist"
        :key="index"
        >
        {{activity.context}}
        </el-timeline-item>
    </el-timeline>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Progress',
  data() {
    return {
      isVisible: false,
      progresslist: []
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    show() {
      this.isVisible = this.show
    }
  },
  methods: {
    beforeClose() {
      console.log('before close')
      this.$emit('update:show', false)
      console.log('isVisible ', this.isVisible)
    },
    open() {
      console.log('open progress')
      this.getProgress()
    },
    async getProgress() {
      const { data: res } = await this.$http.get('/kuaidi/804909574412544580')
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      console.log(res.data)
      this.progresslist = res.data
    }
  }
}
</script>

<style lang="less" scoped></style>
